<!--考勤管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">考勤管理</span>
  </div>
  
  <!--考勤搜索卡片-->
  <el-card style="margin: 20px 20px 0 20px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="用户名" style="width: 200px;">
        <el-select placeholder="请选择" v-model="searchAtteForm.userId">
          <el-option v-for="item in userOption" :label="item.username" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" style="width: auto;">
        <el-date-picker
            v-model="searchAtteForm.startTime"
            type="datetime"
            placeholder="开始日期"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
        />
        &nbsp;至 &nbsp;
        <el-date-picker
            v-model="searchAtteForm.endTime"
            type="datetime"
            placeholder="结束日期"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
        />
      </el-form-item>
      <el-form-item label="考勤状态" style="width: 170px;">
        <el-select placeholder="请选择" v-model="searchAtteForm.type" >
          <el-option label="上班" value="1"></el-option>
          <el-option label="下班" value="2"></el-option>
          <el-option label="迟到" value="3"></el-option>
          <el-option label="缺勤" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadAtte">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 考勤列表 -->
  <el-card style="margin:20px;">
    <el-table :data="AtteTableDate">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="userId" label="员工"  align="center"
                       :formatter="userFormatter"/>
      <el-table-column prop="checkTime" label="签到时间"  align="center"/>
      <el-table-column prop="type" label="考勤状态"  align="center"
                       :formatter="typeFormatter"/>
      <el-table-column prop="locationResult" label="考勤类型"  align="center"
                       :formatter="locationFormatter"/>
      <el-table-column prop="address" label="打卡地点" align="center"/>
<!--      <el-table-column label="操作" align="center">-->
<!--        <template #default="scope">-->
<!--          <el-button link type="primary" size="small" @click="editUser(scope.row.id)">编辑用户</el-button>-->
<!--          <el-button link type="primary" size="small" @click="editAccount(scope.row.id)">编辑账号</el-button>-->
<!--          <el-button link type="primary" size="small" @click="deleteUser(scope.row.id)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
// import axios from "axios";
import axios from "@/util/request";
import qs from "qs";
import {ElMessage} from "element-plus";

//网关
const gateway = '/attendance_api';

//搜索
const searchAtteForm = ref({});
const AtteTableDate = ref([]);
const userOption = ref([]);
const deptOption = ref([]);

const loadAtte = () => {
  let data = qs.stringify(searchAtteForm.value);
  axios.get(gateway+'/oa/attendance/list?'+data).then((response)=>{
    if(response.data.code == 2000){
      AtteTableDate.value = response.data.data;
    }
  })
}

const resetSearch = () => {
  searchAtteForm.value = {};
  loadAtte();
}

// 显示格式转换
const userFormatter = (row,column,cellValue,index) =>{
  if(!userOption.value){
    return cellValue;
  }
  for (let item of userOption.value) {
    if (item.id == cellValue){
      cellValue = item.username;
    }
  }
  return cellValue;
}

const typeFormatter = (row,column,cellValue,index) =>{
  if (cellValue == 1){
    cellValue = '上班';
  }else if (cellValue == 2){
    cellValue = '下班';
  }else if (cellValue == 3){
    cellValue = '迟到';
  }else if (cellValue == 4){
    cellValue = '缺勤';
  }
  return cellValue;
}

const locationFormatter = (row,column,cellValue,index) =>{
  if (cellValue == "Outside"){
    cellValue = '外勤打卡';
  }else if (cellValue == "Normal"){
    cellValue = '公司打卡';
  }
  return cellValue;


}
onMounted(()=>{
  loadAtte();
  loadUser(userOption);
  loadDept(deptOption);

})
</script>

<style scoped>

</style>